<template>
  <el-form :size="size" style="padding-left: 20px;padding-right: 20px;" label-width="100" label-position="right">
	  <template v-for="(item, index) in searches" :key="index">
		  <el-row>
			  <el-col :span="24">
				  <template v-if="item.showLabel===false">
					  {{item.name}}&nbsp;&nbsp;
					  <el-input v-if="item.type==='input'"
								style="width: 100%"
								v-model="searchForm[item.code]"
								:placeholder="item.placeholder||$t('common.please_input')+item.name"
								:maxlength="item.maxlength"
								:show-word-limit="item.showLimit" clearable>
					  </el-input>
					  <ex-select v-if="item.type==='select'"  v-model="searchForm[item.code]" :dict-code="item.dictCode" :pri-key="item.priKey" :placeholder="item.placeholder||$t('common.please_choose')+item.name" :multiple="item.multiple" :ops="item.ops" :permissionData="item.permissionData"></ex-select>
					  <ex-selector v-if="item.type==='selector'"  :model="searchForm" :prop="item.code" :code="item.dictCode" :column="item" :isicon="item.isicon" :params="{}"></ex-selector>
					  <ex-radio-group v-if="item.type==='radio'"  v-model="searchForm[item.code]" :dict-code="item.dictCode" :pri-key="item.priKey"></ex-radio-group>
					  <ex-radio-group v-if="item.type==='checkbox'"  v-model="searchForm[item.code]" :dict-code="item.dictCode" :pri-key="item.priKey"></ex-radio-group>
					  <ex-widget v-if="item.type==='cascade'" :model="searchForm" :size="size" :column="{widgetType:item.type,code:item.code,name:item.name,dataSourceCode:item.dictCode,dataSourceType:item.priKey===true?'2':'1',checkStrictly:item.checkStrictly||true,multiple:item.multiple||false,dataPermissionProcess:item.dataPermissionProcess,permissionData:item.permissionData,dataRange:item.dataRange}"></ex-widget>
					  <ex-widget v-if="item.type==='tree-select'" :model="searchForm" :size="size" :column="{widgetType:item.type,code:item.code,name:item.name,dataSourceCode:item.dictCode,dataSourceType:item.priKey===true?'2':'1',disabledNode:item.disabledNode||false,multiple:item.multiple||false,dataPermissionProcess:item.dataPermissionProcess,permissionData:item.permissionData,dataRange:item.dataRange}"></ex-widget>
					  <el-switch v-if="item.type==='switch'"
								 v-model="searchForm[item.code]"
								 style="--el-switch-on-color: #3884bd; --el-switch-off-color: #b7b7b7"
								 :active-value="item.ops[1]"
								 :inactive-value="item.ops[0]">
					  </el-switch>

					  <el-date-picker v-if="item.type==='date'||item.type==='datetime'"
									  v-model="searchForm[item.code]"
									  style="width: 100%"
									  :type="item.type"
									  :format="item.format"
									  :value-format="item.valueFormat"
									  :placeholder="item.placeholder||$t('common.please_choose')+item.name"
									  clearable>
					  </el-date-picker>
					  <el-date-picker v-else-if="item.type==='daterange'||item.type==='datetimerange'"
									  v-model="searchForm[item.code]"
									  style="width: 100%;border:1px #d9d9d9 solid"
									  :type="item.type"
									  :format="item.format"
									  :value-format="item.valueFormat"
									  range-separator="~"
									  :start-placeholder="item.startPlaceholder||'开始时间'"
									  :end-placeholder="item.endPlaceholder||'结束时间'"
									  :disabled-date="disabledDate"
									  @focus="focusHandler(item.code,item.range)"
									  @visible-change="visibleChange"
									  @calendar-change="calendarChange"
									  clearable>
					  </el-date-picker>
				  </template>
				  <template v-else>
					  <el-form-item :label="item.name">
						  <el-input v-if="item.type==='input'"
									style="width: 100%"
									v-model="searchForm[item.code]"
									:placeholder="item.placeholder||$t('common.please_input')+item.name"
									:maxlength="item.maxlength"
									:show-word-limit="item.showLimit" clearable>
						  </el-input>
						  <ex-select v-if="item.type==='select'"  v-model="searchForm[item.code]" :dict-code="item.dictCode" :pri-key="item.priKey" :placeholder="item.placeholder||$t('common.please_choose')+item.name" :multiple="item.multiple" :ops="item.ops" :permissionData="item.permissionData"></ex-select>
						  <ex-selector v-if="item.type==='selector'"  :model="searchForm" :prop="item.code" :code="item.dictCode" :column="item" :isicon="item.isicon" :params="{}"></ex-selector>
						  <ex-radio-group v-if="item.type==='radio'"  v-model="searchForm[item.code]" :dict-code="item.dictCode" :pri-key="item.priKey"></ex-radio-group>
						  <ex-radio-group v-if="item.type==='checkbox'"  v-model="searchForm[item.code]" :dict-code="item.dictCode" :pri-key="item.priKey"></ex-radio-group>
						  <ex-widget v-if="item.type==='cascade'" :model="searchForm" :size="size" :column="{widgetType:item.type,code:item.code,name:item.name,dataSourceCode:item.dictCode,dataSourceType:item.priKey===true?'2':'1',checkStrictly:item.checkStrictly||true,multiple:item.multiple||false,dataPermissionProcess:item.dataPermissionProcess,permissionData:item.permissionData,dataRange:item.dataRange}"></ex-widget>
						  <ex-widget v-if="item.type==='tree-select'" :model="searchForm" :size="size" :column="{widgetType:item.type,code:item.code,name:item.name,dataSourceCode:item.dictCode,dataSourceType:item.priKey===true?'2':'1',disabledNode:item.disabledNode||false,multiple:item.multiple||false,dataPermissionProcess:item.dataPermissionProcess,permissionData:item.permissionData,dataRange:item.dataRange}"></ex-widget>
						  <el-switch v-if="item.type==='switch'"
									 v-model="searchForm[item.code]"
									 style="--el-switch-on-color: #3884bd; --el-switch-off-color: #b7b7b7"
									 :active-value="item.ops[1]"
									 :inactive-value="item.ops[0]">
						  </el-switch>

						  <el-date-picker v-if="item.type==='date'||item.type==='datetime'"
										  v-model="searchForm[item.code]"
										  style="width: 100%"
										  :type="item.type"
										  :format="item.format"
										  :value-format="item.valueFormat"
										  :placeholder="item.placeholder||$t('common.please_choose')+item.name"
										  clearable>
						  </el-date-picker>
						  <el-date-picker v-else-if="item.type==='daterange'||item.type==='datetimerange'"
										  v-model="searchForm[item.code]"
										  style="width: 100%;border:1px #d9d9d9 solid"
										  :type="item.type"
										  :format="item.format"
										  :value-format="item.valueFormat"
										  range-separator="~"
										  :start-placeholder="item.startPlaceholder||'开始时间'"
										  :end-placeholder="item.endPlaceholder||'结束时间'"
										  :disabled-date="disabledDate"
										  @focus="focusHandler(item.code,item.range)"
										  @visible-change="visibleChange"
										  @calendar-change="calendarChange"
										  clearable>
						  </el-date-picker>
					  </el-form-item>
				  </template>
			  </el-col>
		  </el-row>
	 </template>
  </el-form>
</template>

<script>

import ExSelect from "@/components/exSelect/index.vue";
import ExSelector from "@/components/exSelector/index.vue";
import ExWidget from "@/components/exFormItem/widget.vue";
import ExRadioGroup from "@/components/exRadioGroup/index.vue";

export default {
  name: "searchForm",
  props: {
    size:{type:String,default:'default'},
    searchForm:{type:Object,default:{}},
    searches: {type: Array, default: null},
  },
  components: {ExRadioGroup, ExWidget, ExSelector, ExSelect},
  data() {
    return {
      selectDate: null,
      loading: false,
      range: null,
      code: null,
      codes: [],
    }
  },
  watch: {},
  computed: {},
  created() {
  },
  async mounted() {
  },
  methods: {
    focusHandler(code, range) {
      this.code = code;
      this.codes = this.code.split(",");
      this.codes.forEach(item => {
        this.searchForm[item] = undefined;
      });
      this.range = range;
    },
    visibleChange(visibility) {
      if (!visibility) {
        this.selectDate = undefined;
        let dates = this.searchForm[this.code];
        if (dates) {
          this.codes.forEach((item, index) => {
            this.searchForm[item] = dates[index];
          });
        }
      }
    },
    calendarChange(dates) {
      this.selectDate = dates[0].getTime();
    },
    disabledDate(time) {
      if (this.range && this.selectDate) {
        const rangeDate = this.range * 8.64e7;//8.64e7就是一天的时间戳 24*60*60*1000
        const minTime = this.selectDate - rangeDate
        const maxTime = this.selectDate + rangeDate
        return time.getTime() < minTime || time.getTime() > maxTime
      }
      return false;
    }
  }
}
</script>
